<script type="text/javascript" src="/public/js/kendo/src/js/kendo.web.js"></script>
<script type="text/javascript" src="/public/js/kendo/src/js/cultures/kendo.culture.vi-VN.js"></script>
<link rel="stylesheet" type="text/css" href="/public/js/kendo/src/styles/kendo.common.css">
<link rel="stylesheet" type="text/css" href="/public/js/kendo/src/styles/kendo.default.css">

<script type="text/javascript" src="/public/js/bootstrap/bootstrap-multiselect.js"></script>
<link rel="stylesheet" type="text/css" href="/public/css/bootstrap-multiselect.css">
<script type="text/javascript" src="/public/js/my_plugin/adminPriceEdit.js"></script>
<script type="text/javascript" src="/public/js/extend.jquery.js"></script>
<link rel="stylesheet" type="text/css" href="/public/js/my_plugin/adminPriceEdit.css">

<style>
    .image_ctn_item{
        width: 230px; height: 290px; background-color: #ccc; float:left;  margin: 10px; padding: 3px;
        position: relative;
    }
    .image_ctn_item img{
        max-width: 220px; max-height: 220px;
    }

    .image_ctn_item p{
        position: absolute;
        top:260px;
        background-color: #4c4c4c;
        width: 225px;
        padding: 5px;
    }


    .image_ctn_item p a{
        font-style: italic;
        font-size: 0.9em;
        color: #fff;
    }

    .image_ctn_item p a:hover{
        font-style: normal;
        color: #c5e8f7;
    }

    .image_ctn_item .noteCtn{
        padding: 5px;
        background-color: #ccc;
        position: absolute;
        top:220px;
        width: 225px;
        height: 40px;
        overflow: hidden;
        color: #00246b;
    }


</style>
<?php
use Core\Config;
use Zend\Json\Json;

$domainItem = $this->domainItem;
$dishItem = $this->dishItem;
$content = '';
if($dishItem){
    $content = $dishItem->content;
    $dishLang = $dishItem->getDishLang(\Core\Session\FrontSessionHelper::getCurrentLang());
    $allPrices = $dishItem->getDishPrice();
    $allImages = $dishItem->getDishImages();
}

$allUnitAsArray = $this->allUnitAsArray;
array_unshift($allUnitAsArray, array('id'=>'', 'name'=>''));
$allUnitAsJson = Json::encode($allUnitAsArray);

$allCurrencyUnit = Config::getCurrencyUnit();
$tmpArr = array();
foreach ($allCurrencyUnit as $key => $val) {
    array_push($tmpArr, array('key'=>$key, 'val'=>$val));
}

$allCurrencyUnitAsJson = Json::encode($tmpArr);

$lang = \Core\Session\FrontSessionHelper::getCurrentLang();
$dishProperties = Config::getDishProperties($lang);
$dishPropertiesAsJson = Json::encode($dishProperties);


?>
<style type="text/css">

    #top_control_container, #bottom_control_container{
        padding: 10px ;
        background-color: #d7d8d7;
    }

    #main_container{
        padding: 10px ;
        background-color: #e8e8e8;
    }

    #prCtn{
        background-color: #c5e8f7;
        padding: 7px ;
    }
</style>
<hr />
<input type="hidden" id="dishId" value="<?php
if($dishItem) echo $dishItem->id;
?>">

<ol class="breadcrumb bc-3">
    <li>
        <a href="/<?php echo $domainItem->domain ?>/admin"><i class="entypo-home"></i>Home</a>
    </li>
    <li >
        <a href="/<?php echo $domainItem->domain ?>/mon-an">Thực đơn chung</a>
    </li>

    <li class="active">
        <strong><?php if($dishItem) echo 'Sửa thực đơn';
            else echo 'Thêm thực đơn';
            ?></strong>
    </li>

</ol>
<h3><?php if($dishItem) echo 'Sửa món ăn: '.$dishItem->header;
    else echo 'Thêm thực đơn';
    ?> </h3>
<div id="top_control_container">
    <a id="btnTopSaveDish" class="btn btn-sm btn-blue btn-icon" href="javascript:void(0);" ><i class="entypo-floppy"></i>Lưu</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a id="btnTopSaveAndCreateDish" class="btn btn-sm btn-blue btn-icon" href="javascript:void(0);"><i class="entypo-floppy"></i>Lưu và thêm mới</a>
</div>
<div id="main_container">
    <form class="form-horizontal form-groups-bordered" role="form">
        <div class="form-group">
            <label class="col-sm-3 control-label" for="field-1">Tên(*)</label>
            <div class="col-sm-5">
                <input id="txtName" class="form-control" type="text" value="<?php if($dishItem)echo $dishLang->name ?>"
                       required placeholder="Nhập tên món ăn, bắt buộc" >
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label" for="txtDescription">Mô tả</label>

            <div class="col-sm-5">
                <textarea id="txtDescription" name="txtDescription" style="width: 100%" rows="3"  class="k-textbox"><?php if($dishItem)echo $dishLang->description ?></textarea>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label" >Nhóm chính(*)</label>
            <div class="col-sm-5">
                <select id="cboMainCategory" class="form-control" >
                    <?php
                    if($dishItem){
                        $myMainCategory = $dishItem->getPrimaryCategory();
                    }else
                        $myMainCategory = null;

                    foreach ($this->allMainDishGroup as $aCategory) {
                        $selected = '';
                        if($myMainCategory){
                                if($myMainCategory->id == $aCategory->id)
                                    $selected = 'selected';
                        }
                        echo '<option '.$selected.' value="'.$aCategory->id.'">'.$aCategory->name.'</option>';
                    }
                    ?>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label" >Nhóm phụ</label>
            <div class="col-sm-5">
                <select id="cboSubCategory" class="form-control" multiple="multiple" data-width="auto">
                    <?php
                    if($dishItem){
                        $mySubCategories = $dishItem->getSubCategories();
                    }else
                        $mySubCategories = array();
                    $count = 0;
                    foreach ($this->allSubDishGroup as $aCategory) {
                        if($aCategory->lft == 1 ){
                            if($count == 0)
                                echo '<optgroup label="'.$aCategory->name.'"> ';
                            else{
                                echo '</optgroup><optgroup label="'.$aCategory->name.'"> ';
                            }
                            $count++;
                        }else{
                            $selected = '';
                            if($mySubCategories){
                                foreach ($mySubCategories as $aMyCategory) {
                                    if($aMyCategory->id == $aCategory->id)
                                        $selected = 'selected';
                                }
                            }
                            echo '<option '.$selected.' value="'.$aCategory->id.'">'.$aCategory->name.'</option>';
                        }


                    }
                    ?>
                    </optgroup>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label" >Active</label>
            <div class="col-sm-5">
                <?php
                $checked = 'cheked';
                if($dishItem)
                    if($dishItem->active == 1)
                        $checked = 'checked';
                    else
                        $checked = '';
                else
                    $checked = 'checked';
                ?>
                <input  type="checkbox" id="chkActive" <?php echo $checked ?> >
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label" >Giá(*)</label>
            <div class="col-sm-9 ">
                <div id="prCtn"></div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label" >Thuộc tính</label>
            <div class="col-sm-9 ">
                <select id="cboProperties" multiple="multiple" ></select>
            </div>
        </div>


        <div class="form-group">
            <div >
                <div class="col-xsm-12" style="margin: 5px; text-align: center; padding: 5px 20px; background-color: #c5e8f7">
                    <div >
                        <a style="color: #2c7ea1" href="javascript:getThumbImg();" ><i class="entypo-plus"></i>Chọn ảnh thể hiện</a>
                        &nbsp;&nbsp;&nbsp;
                        <div style=" margin: 0 auto; padding: 5px" id="imageCtn">
                            <?php
                            if($allImages){
                                foreach ($allImages as $aImage) {
                                    echo '<div  class="image_ctn_item">
                                            <img  src="'.$aImage->path.'"><br>
                                            <div class="noteCtn">'.$aImage->description.'</div>
                                        <p><a class="lnkRemove" href="javascript:void(0);"><i class="entypo-cancel"></i>&nbsp;Xóa</a>
                                        <a class="lnkTakeNote" href="javascript:void(0);" "><i class="entypo-pencil"></i>&nbsp;Mô tả</a>
                                        </p>
                                        </div>';
                                }
                            }
                            echo '<div style="clear: both"></div>';

                            ?>
                        </div>

                    </div>
                </div>

            </div>
        </div>
        <div class="form-group">
            <div style="padding: 0px 5px;">

                <div class="col-xsm-12 " style="background-color: #c5e8f7; padding: 10px 20px; border: 1px solid #CCC;  -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;">
                    <a  style="color: #2c7ea1" href="javascript:tougleEditor()"><i class="entypo-pencil"></i>&nbsp;&nbsp;Soạn nội dung</a>
                </div>
                <div class="col-xsm-12" style="min-height: 200px; margin: 0 auto;   ;border: 1px solid #CCC; background-color: #fff" id = "dish-content-container">
                    <?php if($dishItem)  echo $dishLang->content ?>
                </div>


            </div>
        </div>

        <div class="form-group">
            <div style="padding: 0px 5px;">

                <div class="col-xsm-12 " style="background-color: #c5e8f7; padding: 10px 20px; border: 1px solid #CCC;  -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;">
                    <a  style="color: #2c7ea1" href="javascript:tougleHowToEditor()"><i class="entypo-pencil"></i>&nbsp;&nbsp;Cách ăn </a>
                </div>
                <div class="col-xsm-12" style="min-height: 200px; margin: 0 auto;   ;border: 1px solid #CCC; background-color: #fff" id = "how-to-container">
                    <?php if($dishItem)  echo $dishLang->how_to ?>
                </div>


            </div>
        </div>

        <div class="form-group">
            <div style="padding: 0px 5px;">

                <div class="col-xsm-12 " style="background-color: #c5e8f7; padding: 10px 20px; border: 1px solid #CCC;  -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;">
                    <a  style="color: #2c7ea1" href="javascript:tougleIngredientEditor()"><i class="entypo-pencil"></i>&nbsp;&nbsp;Nguyên liệu </a>
                </div>
                <div class="col-xsm-12" style="min-height: 200px; margin: 0 auto;   ;border: 1px solid #CCC; background-color: #fff" id = "ingredient-container">
                    <?php if($dishItem)  echo $dishLang->ingredient ?>
                </div>


            </div>
        </div>
    </form>
</div>
<div id="bottom_control_container">
    <a id="btnBottomSaveDish" class="btn btn-sm btn-blue btn-icon" href="javascript:void(0);"  ><i class="entypo-floppy"></i>Lưu</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a id="btnBottomSaveAndCreateDish" class="btn btn-sm btn-blue btn-icon" href="javascript:void(0);" ><i class="entypo-floppy"></i>Lưu và thêm mới</a>
</div>

<script>

    $(document).ready(function(){
        var priceEditCtrl;
        var cboProperties;

        $('#txtName').focus();
        windowHtml = $('#takeNoteWindow').html();
        $('#myWindow').html(windowHtml);

        $('#myWindow').on('shown.bs.modal', function () {
            $('#myWindow #txtEditNote').focus();
        })
        $('#cboMainCategory').multiselect();
        $('#cboSubCategory').multiselect();

        $('#cboMainCategory').change(function(){
            changeMainCategory();
        })
        changeMainCategory();
        function changeMainCategory(){
            mainVal = $('#cboMainCategory').val();
            $("#cboSubCategory option[value=" + mainVal + "]").attr('disabled','disabled')
                .siblings().removeAttr('disabled');
            $("#cboSubCategory option[value=" + mainVal + "]").removeAttr("selected");
            $("#cboSubCategory").multiselect('rebuild')
        }

        var allMyPrice = [];
        <?php
            if($allPrices)
            foreach ($allPrices as $aPrice) {
                $unit = '';
                foreach ($allUnitAsArray as $aUnit) {
                    if($aUnit['id'] == $aPrice->unit_id)
                    $unit=$aUnit['name'];
                }
                $tmpStr = 'allMyPrice.push({unit:"'.$unit.'", price:'.$aPrice->price.',currency_unit:"'.$aPrice->currency_unit.'"});';
                echo $tmpStr;
            }

        ?>

         $('#prCtn').adminPriceEdit({myData:allMyPrice,
            unitJson: <?php echo $allUnitAsJson ?>,
            currentUnitJson: <?php echo $allCurrencyUnitAsJson ?>});

         priceEditCtrl = $('#prCtn').data('adminPriceEdit');

         cboProperties = $("#cboProperties").kendoMultiSelect({
            dataTextField: "name",dataValueField: "key",
            itemTemplate: '<img style="width: 18px" src="#:data.image#">&nbsp;#: data.name #',
            dataSource: <?php echo  $dishPropertiesAsJson ?>
        }).data("kendoMultiSelect")

        var dishProperties = []
        <?php
               if($dishItem->property){
                $tmpArr = explode('$$$', $dishItem->property);
                    foreach ($tmpArr as $aProperty) {
                       echo 'dishProperties.push("'.$aProperty.'");';
                   }
               }

           ?>
        cboProperties.value(dishProperties);

        $("#myWindow").keypress(function(event){
            //if the key press is ESC
            if (event.keyCode === 27) {
                $('#myWindow').modal('toggle');
            }

            if(event.keyCode === 13) {
                saveNote();
            }
        });

        $('#myWindow #btnSaveNote').on('click',function(){
            saveNote();
        })

        function saveNote(){
            $(currentImageCtn).find('.noteCtn').each(function(){
                val = $('#myWindow #txtEditNote').val();
                $(this).html(val);
            })
            $('#myWindow').modal('toggle');
            currentImageCtn = null;
        }


        $('#btnTopSaveDish').click(function(){
            saveDish();
        });
        $('#btnBottomSaveDish').click(function(){
            saveDish();
        });
        $('#btnTopSaveAndCreateDish').click(function(){
            saveDish(true);
        });
        $('#btnBottomSaveAndCreateDish').click(function(){
            saveDish(true);
        });

        function saveDish(goOn){
            goOn = typeof goOn !== 'undefined' ? goOn : false;
            if(!validate()) {
                flag = false;
                return;
            }

            name = $("#txtName").val();
            description = $("#txtDescription").val();
            if(editor)
                content = editor.getData();
            else
                content = $("#dish-content-container").html();

            if(howToEditor)
                howTo = howToEditor.getData();
            else
                howTo = $("#how-to-container").html();

            if(ingredientEditor)
                ingredient = ingredientEditor.getData();
            else
                ingredient = $("#ingredient-container").html();

            thumbImage = $("#imgThumb").attr("src");
            categories = $("#cboMainCategory").val();
            subcategories = $("#cboSubCategory").val();
            id = $("#dishId").val();

            active = $("#chkActive").is(':checked')?1:0;
            priceArr = priceEditCtrl.getPrices();
            properties = cboProperties.value();
            allImages = getImageArr();

            var opts = {
                "closeButton": true,
                "debug": false,
                "positionClass": "toast-bottom-right",
                "onclick": null,
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": "10000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            };
            $.blockUI({ message: 'Vui lòng chờ ... ' });

            $.post('<?php echo '/'.$domainItem->domain.'/admin/general-dish/save' ?>',{id:id,
                    name:name, description:description, content:content,howTo:howTo,ingredient:ingredient,
                    allImages:allImages,  categories:categories, subcategories:subcategories, active:active,
                    priceArr:priceArr,properties:properties}
                ,function(result){
                    if (result.success){
                        $("#dishId").val(result.id);
                        if(!goOn)
                            window.location = '<?php echo '/'.$domainItem->domain.'/mon-an'  ?>'
                        else{
                            window.location = '<?php echo '/'.$domainItem->domain.'/mon-an/them-moi' ?>'
                        }


                    }else{
                        toastr.error("Lỗi: "+result.msg, "", opts);
                    }
                    $.unblockUI();

                },'json');

        }

        function validate(){

            var opts = {
                "closeButton": true,
                "debug": false,
                "positionClass": "toast-bottom-right",
                "onclick": null,
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": "5000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            };

            if( !$('#txtName').val()){
                $('#txtName').focus();
                toastr.error("Vui lòng nhập tên món ăn", "", opts);
                return false;
            }

            if(  !$("#cboMainCategory").val()){
                toastr.error("Vui lòng nhập chọn nhóm chính", "", opts);

                return false;
            }

            priceArr = priceEditCtrl.getPrices();
            if(priceArr.length == 0){
                toastr.error("Vui lòng nhập giá món ăn", "", opts);

                return false;
            }

            return true;

        }

        function getImageArr(){
            resultArr = [];
            $('#imageCtn .image_ctn_item').each(function(){
                tmpJson = {};
                img = $(this).find('img');
                noteDiv = $(this).find('div.noteCtn');
                tmpJson['path'] =  $(img).attr('src');
                tmpJson['description'] =  $(noteDiv).html();

                resultArr.push(tmpJson);
            })
            return resultArr;
        }

        $('#imageCtn .image_ctn_item p a.lnkRemove').on('click', function(){
            $(this).parents('.image_ctn_item').each(function(){
                $(this).remove();
            })
        })

        $('#imageCtn .image_ctn_item p a.lnkTakeNote').on('click', function(){
            setWindowTitle('myWindow', 'Viết mô tả cho ảnh');
            $('#myWindow').modal();
            currentImageCtn = $(this).closest('.image_ctn_item');
            $(this).parents('.image_ctn_item').each(function(){
                $(this).find('.noteCtn').each(function(){
                    note = $(this).html()
                    $('#myWindow #txtEditNote').val(note);
                })
            })
        })
    })


    var editor;
    var howToEditor;
    var ingredientEditor;

    function tougleEditor(){
        if ( editor ){
            editor.destroy();
            editor = null;
        }
        else
            editor = CKEDITOR.replace( "dish-content-container" ,{
                customConfig : '/public/js/ckeditor/distribution_config.js',
                filebrowserBrowseUrl : '/public/js/ckfinder/ckfinder.html?id=distribution',
                filebrowserImageBrowseUrl : '/public/js/ckfinder/ckfinder.html?Type=Images&id=distribution',
                filebrowserFlashBrowseUrl : '/public/js/ckfinder/ckfinder.html?Type=Flash&id=distribution',
                filebrowserUploadUrl : '/public/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&id=distribution',
                filebrowserImageUploadUrl : '/public/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&id=distribution',
                filebrowserFlashUploadUrl : '/public/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash&id=distribution'
            });
//        CKFinder.setupCKEditor( editor, { basePath : '../', skin : 'v' , configId : 'distribution'} ) ;
    }

    function tougleHowToEditor(){
        if ( howToEditor ){
            howToEditor.destroy();
            howToEditor = null;
        }
        else
            howToEditor = CKEDITOR.replace( "how-to-container" ,{
                customConfig : '/public/js/ckeditor/distribution_config.js',
                filebrowserBrowseUrl : '/public/js/ckfinder/ckfinder.html?id=distribution',
                filebrowserImageBrowseUrl : '/public/js/ckfinder/ckfinder.html?Type=Images&id=distribution',
                filebrowserFlashBrowseUrl : '/public/js/ckfinder/ckfinder.html?Type=Flash&id=distribution',
                filebrowserUploadUrl : '/public/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&id=distribution',
                filebrowserImageUploadUrl : '/public/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&id=distribution',
                filebrowserFlashUploadUrl : '/public/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash&id=distribution'
            });
//        CKFinder.setupCKEditor( editor, { basePath : '../', skin : 'v' , configId : 'distribution'} ) ;
    }

    function tougleIngredientEditor(){
        if ( ingredientEditor ){
            ingredientEditor.destroy();
            ingredientEditor = null;
        }
        else
            ingredientEditor = CKEDITOR.replace( "ingredient-container" ,{
                customConfig : '/public/js/ckeditor/distribution_config.js',
                filebrowserBrowseUrl : '/public/js/ckfinder/ckfinder.html?id=distribution',
                filebrowserImageBrowseUrl : '/public/js/ckfinder/ckfinder.html?Type=Images&id=distribution',
                filebrowserFlashBrowseUrl : '/public/js/ckfinder/ckfinder.html?Type=Flash&id=distribution',
                filebrowserUploadUrl : '/public/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&id=distribution',
                filebrowserImageUploadUrl : '/public/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&id=distribution',
                filebrowserFlashUploadUrl : '/public/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash&id=distribution'
            });
//        CKFinder.setupCKEditor( editor, { basePath : '../', skin : 'v' , configId : 'distribution'} ) ;
    }




   function getThumbImg(){
        try{
            var finder = new CKFinder();
            finder.basePath = '/public/js/ckfinder/';
            finder.selectActionFunction = setThumbFile;
            finder.id="distribution";
            finder.language = 'vi';
            finder.popup();
        }catch(err){

        }
    }

    function setThumbFile( fileUrl , data , allFiles )
    {
        for (obj in allFiles) {
            html = '<div  class="image_ctn_item">' +
                '<img  src="'+allFiles[obj].url+'"><br>' +
                '<div class="noteCtn"></div>'+
                '<p><a class="lnkRemove" href="javascript:void(0);" "><i class="entypo-cancel"></i>&nbsp;Xóa</a>    <a class="lnkTakeNote" href="javascript:void(0);" "><i class="entypo-pencil"></i>&nbsp;Mô tả</a></p>' +
                '</div>';
            $('#imageCtn').append(html);
        }
        $('#imageCtn').append('<div style="clear: both"></div>');

        $('#imageCtn .image_ctn_item p a.lnkRemove').on('click', function(){
            $(this).parents('.image_ctn_item').each(function(){
                $(this).remove();
            })
        })

        $('#imageCtn .image_ctn_item p a.lnkTakeNote').on('click', function(){
            setWindowTitle('myWindow', 'Viết mô tả cho ảnh');
            $('#myWindow').modal();
            currentImageCtn = $(this).closest('.image_ctn_item');
            $(this).parents('.image_ctn_item').each(function(){
                $(this).find('.noteCtn').each(function(){
                    note = $(this).html()
                    $('#myWindow #txtEditNote').val(note);
                })
            })
        })
    }
    function setWindowTitle(ctnId, title){
        $('#'+ ctnId + ' .modal-dialog .modal-content .modal-header h4').text(title)
    }

var currentImageCtn;
</script>
<div class="hide" id="takeNoteWindow">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body" >

                <dl>
                    <dt style="padding: 5px">
                    <div class="row form-group">
                        <label class="col-sm-2 control-label" for="txtCategoryCode">Mô tả:</label>
                        <div class="col-sm-6">
                            <textarea id="txtEditNote" rows="5"   style="width: 400px;"></textarea>
                        </div>
                    </div>
                    </dt>

                </dl>
            </div>
            <div class="modal-footer">
                <a type="button" class="btn btn-default" data-dismiss="modal" >Đóng</a>
                <a type="button" class="btn btn-primary" id="btnSaveNote">Lưu</a>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>